<template>
<div class="cloud-dir-tree full-height">
  <div class="dir-tree-head bg-primary text-white">
    <q-icon name="iconfont icontubiao-59 margin-r-10"></q-icon>
    <span class="head-name">云端</span>
  </div>
  <q-scroll-area :thumb-style="thumbStyle" class="q-pa-sm q-gutter-sm dir-tree">
    <q-tree :nodes="cloudFolder" node-key="id" ref="cloudFolderTree" :selected.sync="selected"
            no-nodes-label="暂无数据"
            @lazy-load="getFolderChildList" @update:selected="selectTree" selected-color="primary"/>
  </q-scroll-area>
</div>
</template>

<script>
import { getCloudList } from 'src/boot/program/cloud'
import { getFiletype } from 'src/assets/js/util'
import { mapGetters } from 'vuex'
export default {
  name: 'cloud-dir-tree',
  data () {
    return {
      searchVal: '', // 搜索值
      thumbStyle: this.CommonConfig.thumbStyle, // 滚动条样式
      selected: null, // 树形选中数据
      selectedCopy: null, // 树形选中数据
      cloudFolder: [], // 存储云端文件夹目录
      id: 0
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created () {
    this.getInfo()
  },
  methods: {
    getInfo () {
      this.cloudFolder = []
      let rootFolder = {
        size: null,
        timestamp: null,
        label: '所有文件',
        _name: this.userInfo.tenant_id ? this.userInfo.tenant_id + '' : '1',
        path: '',
        isFile: true,
        lazy: true,
        children: [],
        id: 0,
        root: true
      }
      this.cloudFolder.push(rootFolder)
      this.init()
    },
    init () {
      // 获取根目录列表
      getCloudList(this.cloudFolder[0].path).then((res) => {
        this.cloudFolder[0].children = this.initInfo(res.data.dirs, false)
        let files = this.initInfo(res.data.files, true)
        let node = [].concat(this.cloudFolder[0].children, files)
        this.$emit('getFile', node, this.cloudFolder[0])
        this.selected = this.cloudFolder[0].id
        this.selectedCopy = this.selected
      }).finally(() => {
        this.$q.loading.hide()
      })
    },
    // 重置数据
    initInfo (info, isFile) {
      return info.map(item => {
        ++this.id
        let type = isFile ? getFiletype(item.label) : 'other'
        return {
          ...item,
          id: this.id,
          _name: item.label,
          isFile: isFile,
          type,
          lazy: true,
          source: 'cloud',
          icon: isFile ? 'img:statics/svg/' + type + '.svg' : 'img:statics/svg/file-icon.svg',
          children: []
        }
      })
    },
    // 获取子级列表
    getFolderChildList ({ node, key, done, fail }) {
      getCloudList(node.path).then((res) => {
        let dirs = this.initInfo(res.data.dirs, false)
        let files = this.initInfo(res.data.files, true)
        let nodes = [].concat(dirs, files)
        this.$emit('getFile', nodes, node)
        done(dirs)
      })
    },
    getFile (node) {
      if (!(node && node.hasOwnProperty('path'))) {
        return
      }
      getCloudList(node.path).then((res) => {
        let dirs = this.initInfo(res.data.dirs, false)
        let files = this.initInfo(res.data.files, true)
        let nodes = [].concat(dirs, files)
        this.$emit('getFile', nodes, node)
        node.children = dirs
      })
    },
    // 通过右侧双击文件夹获取子文件夹内容，同时让左侧目录树位于相应的位置
    setExpand (selFiles, dirs) {
      this.selected = selFiles.id
      this.selectedCopy = this.selected
      let selNode = this.$refs.cloudFolderTree.getNodeByKey(this.selected)
      this.getFile(selNode)
      this.$refs.cloudFolderTree.setExpanded(selFiles.id, true)
    },
    // 目录树选择
    selectTree (target) {
      if (target === null) {
        this.selected = this.selectedCopy
      } else {
        this.selectedCopy = this.selected
      }
      let selNode = this.$refs.cloudFolderTree.getNodeByKey(this.selected)
      this.getFile(selNode)
      this.$refs.cloudFolderTree.setExpanded(this.selected, true)
    },
    // 返回上一级目录
    backParentNode () {
      let selNode = this.$refs.cloudFolderTree.getNodeByKey(this.selected)
      let paths = selNode.path.split('/')
      let parentPaths = paths.slice(0, paths.length - 2)
      const parentNode = this.getParentNode(parentPaths, this.cloudFolder, 0)
      this.selected = parentNode.id
      this.selectedCopy = this.selected
      this.$refs.cloudFolderTree.setExpanded(this.selected, true)
      this.getFile(parentNode)
    },
    // 获取父级node
    getParentNode (parentPaths, nodes, level) {
      let result = nodes.find(item => {
        return (item._name && item._name === parentPaths[level]) || item.label === parentPaths[level]
      })
      if (parentPaths.length - 1 !== level) {
        result = this.getParentNode(parentPaths, result.children, level + 1)
      }
      return result
    }
  }
}
</script>

<style scoped lang="stylus">
.dir-tree-head{
  padding 0 20px
  height 40px
  line-height 40px
  font-size 18px
}
.dir-tree{
  height calc(100% - 41px)
}
</style>
